import React from 'react';
import {HStack, ScrollView} from "@gluestack-ui/themed";
import Rows from "@/components/k-view/table/Rows";
import {TableContext} from "@/components/k-view/table/context";
import {ScrollInstance, TableHeadProps} from "./types";
import useTool from "@/utils";

const TableHead = React.forwardRef<ScrollInstance, TableHeadProps>((props, ref) => {
    const {
        normalColumns,
        fixedColumns,
        headerHeight
    } = React.useContext(TableContext);
    const {children} = props;
    const scrollRef = React.useRef<any>(null);
    const {isObject} = useTool();

    React.useImperativeHandle(ref, () => ({
        scrollTo: scrollRef.current.scrollTo,
    }));

    return (
        <HStack>
            <Rows columns={fixedColumns} height={headerHeight}>
                {isObject(children) ? children : undefined}
            </Rows>
            <ScrollView
                ref={scrollRef}
                horizontal={true}
                showsHorizontalScrollIndicator={false}
                bounces={false}
                pinchGestureEnabled={false}
                alwaysBounceHorizontal={false}
                keyboardDismissMode="on-drag"
                automaticallyAdjustContentInsets={false}
                directionalLockEnabled={true}
                scrollEnabled={false}
            >
                <Rows columns={normalColumns} height={headerHeight}>
                    {isObject(children) ? children : undefined}
                </Rows>
            </ScrollView>
        </HStack>
    );
});

export default TableHead;